<template>
	<view style="position: relative;">
		<cu-custom bgColor="bg-orange" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">记账</block>
		</cu-custom>
		<view class="bigbox">
			<view class="outside">
				<view class="time">
					<view class="year">{{year}}年</view>
					<view class="month" @click="showmonth">{{month}}月
						<van-icon name="arrow-down" />
					</view>
				</view>
				<view class="box">
					<view class="input">
						<view>收入</view>
						<view class="price">+{{input}}</view>
					</view>
					<view class="output">
						<view>支出</view>
						<view class="price">-{{output}}</view>
					</view>
					<view class="box1">
						<van-icon name="chart-trending-o" size='50rpx' @click='statistics' />
						<view>报表</view>
					</view>
				</view>
				<view class="choose">
					<!-- <view class="box1">
						<van-icon name="gold-coin-o" size='50rpx' />
						<view>资产</view>
					</view> -->
			
					<!-- <view class="box1">
						<van-icon name="cash-back-record-o" size='50rpx' />
						<view>支出</view>
					</view>
					<view class="box1">
						<van-icon name="after-sale" size='50rpx' />
						<view>收入</view>
					</view> -->
			
				</view>
			</view>
		</view>
		<view class="content">
			<view v-for="(item,index) in rightinfo" :key="index" class="item">
				<view class="type">
					{{item.type}}
				</view>
				<view class="time">
					{{item.time}}
				</view>
				<view class="box">

					<view class="num" v-if="item.attribute=='支出'">
						-{{item.num}}
					</view>
					<view class="num" v-else>
						+{{item.num}}
					</view>
					<view class="attribute">
						{{item.attribute}}
					</view>
				</view>
			</view>
		</view>
		<view class="add" @click="addpay">
			<van-icon name="plus" size='50rpx' />
		</view>
		<van-popup :show="show" position="bottom" :round="true" custom-style='height:400rpx' integer>
			<van-datetime-picker type="year-month" :value="value" @input="onInput" :max-date=" maxDate" title='选择时间'
				@confirm='confirmtime' @cancel='canceltime' />
		</van-popup>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				year: new Date().getFullYear(),
				value: new Date().getTime(),
				month: new Date().getMonth() + 1,
				input: 0.00,
				output: 0.00,
				show: false,
				maxDate: new Date().getTime(),
				day: '',
				rightinfo: '',
			};
		},
		onLoad() {
			if (!this.payinfo.length) this.getpayinfo()
			this.getrightinfo()
		},
		onShow() {
			this.getrightinfo()
		},
		computed: {
			...mapState('m_pay', ['payinfo']),
			...mapState('m_user', ['token', 'userinfo']),
		},
		methods: {
			...mapMutations('m_pay', ['updatepayinfo']),
			async getpayinfo() {

				const data = await uni.$http.get('/get/getpayinfo')
				if (data.data.status === 0) {
					this.updatepayinfo(data.data.data)
				}
				this.getrightinfo()
			},
			getrightinfo() {
				this.rightinfo = this.payinfo.filter(item => {
					const index = item.time.split('/')
					return index[0] == this.year && index[1] == this.month
				})
				this.input = 0
				this.output = 0
				this.rightinfo.forEach(item => {
					if (item.attribute == '支出')
						this.output += item.num
					else
						this.input += item.num
				})
			},
			showmonth() {
				this.show = true
			},
			onInput(e) {
				this.value = e.detail
			},
			confirmtime() {
				this.show = false
				const date = new Date(this.value); // 创建一个 Date 对象，传入时间戳作为参数

				this.year = date.getFullYear(); // 获取年份
				this.month = date.getMonth() + 1; // 获取月份（注意要加 1，因为月份是从 0 开始计数）
				this.day = date.getDate(); // 获取日期
				this.getrightinfo()
			},
			canceltime() {
				this.show = false
			},
			addpay() {
				uni.navigateTo({
					url: '/subpkg/addpay/addpay'
				})
			},
			statistics() {
				uni.navigateTo({
					url: '/subpkg/statistics/statistics'
				})
			}
		}
	}
</script>

<style lang="less">
	.bigbox{
		width: 100%;
		height: 237rpx;
		background-color: #fff;
		position: fixed;
	}
	.outside {
		width: 90%;
		display: flex;
		background-color: #FDD692;
		margin-top: 20rpx;
		margin-left: 40rpx;
		padding-bottom: 45rpx;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		font-size: 35rpx;
		border-radius: 20rpx;
		.time {
			display: flex;
			flex-direction: column;
			height: 100rpx;
			margin-left: 20rpx;
			margin-top: 50rpx;
			padding-right: 20px;
			border-right: 1px solid #754F44;

			.year {}

			.month {
				margin-top: 20rpx;
				font-size: 40rpx;
			}
		}


		.box {

			margin-left: 20rpx;
			margin-top: 50rpx;
			display: flex;

			.input {
				margin: 0rpx 20rpx;

				.price {
					font-size: 40rpx;
					margin-top: 20rpx;
				}
			}

			.output {
				margin: 0rpx 20rpx;

				.price {
					font-size: 40rpx;
					margin-top: 20rpx;
				}
			}

			.box1 {
				width: 130rpx;
				height: 130rpx;
				background-color: #FFFFF2;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-left: 20rpx;
				margin-top: -8rpx;
			}
		}
	}

	.content {
		// margin-top: 120rpx;
		margin-top: 260rpx;

		.item {
			margin: 15rpx 38rpx;
			width: 90%;
			height: 100rpx;
			border-radius: 20rpx;
			background-color: #FDD692;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.type {
				margin-left: 28rpx;
			}

			.box {
				margin-right: 28rpx;
			}
		}
	}

	.choose {
		display: flex;

		border: 1rpx solid #eee;
		border-radius: 30rpx;
		background-color: #f8ecc9;
		font-size: 30rpx;
		position: absolute;
		top: 230rpx;
		left: 40%;

		.box1 {
			width: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-right: 1px solid #a79c8e;
			padding: 0rpx 20rpx;
		}

		.box1:last-child {
			border-right: none;
		}
	}

	.add {
		background-color: #f9cdad;
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 80vh;
		right: 90rpx;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	}
</style>